<!DOCTYPE html>
<html lang="en">    <!--标签和属性--> <!--标签不区分大小写-->
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">  <!-- 指定页面编码-->
    <meta http-equiv="refresh" content="30">    <!--页面每个30秒刷新一次-->
    <meta http-equiv="refresh" content="5"; url="http://www.baidu.com"> <!--页面自动跳转-->
    <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>    <!--关键字：给网络爬虫爬取-->
    <meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/>   <!--网站的描述-->
    <meta http-equiv="x-ua-compatible" content="IE=IE10;IE=IE9;IE=IE8;"> <!--指定IE浏览器模式-->
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="CSS/common.css">   <!--加载CSS-->
    <link rel="shortcut icon" href="image/favicon.ico"> <!--加载网站小图标-->
    <style></style>
    <script></script>
</head>
<body>
<!--常用的20个标签-->
<!--所有标签分为：块级标签，行内标签（内联标签）-->
<!--白板标签+CSS可以构造其他任何标签-->
<!--标签之间可以嵌套-->
<!--标签存在的意义，css操作，js操作-->
块级标签：h系列(加大加粗)，p标签（段落之间有间距）,div标签（白板）
行内标签：span（白板，自身不带任何特性）,input,a标签

1、各种符号
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
&nbsp;  空格符号
&gt;    大于符号
&lt;    小于符号
2、p和br--块级标签
<p>p标签标示段落</p>
<br> br标签-换行
3、h标签-标题--行级标签
<h1>h1标签</h1>
...
<h6>h6标签</h6>
4、span标签--行内标签（内联标签）
<span>span</span>
5、div标签
<div>111</div>
<p>div标签被设置了float，position就不再占一行</p>
6、input标签--行内标签 + 配合input标签
<!--name属性指定form打包的键，输入的数据为值，用于后台获取数据-->
<!--input的disable属性，让表单不可编辑-->
<!--placeholder 属性提供可描述输入字段预期值的提示信息-->
<!--input系列-->
<!--required 属性规定必需在提交之前填写输入字段，如果使用该属性，则字段是必填（或必选）的。-->
<input type="text" name="user",value="设置默认值">
<input type="password" name="pwd">
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮，提交表单">
 单选提交
<!--name必须都相同，value的值提交到后台,checked设置默认被选中-->
<input type="radio" name="gender",value="1" checked="checked">
<input type="radio" name="gender",value="2">
<input type="radio" name="gender",value="3">
 复选框
<!--提交到后台的key是name属性，值为value属性组成的列表,checked设置默认被选中-->
<input type="checkbox" name="favor" value="1" checked="checked">
<input type="checkbox" name="favor" value="2" checked="checked">
<input type="checkbox" name="favor" value="3">
 上传文件
<!--依赖form表单的属性,form表单需设置enctype="multipart/form-data"-->
<input type="file" name="fname">
 重置
<input type="reset" value="重置">
 提交多行
<!--配合textarea标签-->
 提交下拉框
<!--配合select标签-->

7、form标签--表单
<!--action属性表示表单提交到哪个页面;method属性指定提交方式，默认为GET-->
<!--提交会将输入的数据打包成字典，然后发给后台，后台根据key获取value-->
<form action="" method="POST"></form>
<form enctype="multipart/form-data" action="" method="POST"></form>   <!--用于上传文件-->

8、textarea标签--多行文本
<textarea name="text">这里写默认值</textarea>
9、select标签--下拉框
<!--name属性是提交后台的key，value是提交到后台的值,selected设置默认值-->

<!--单选下拉框-->
<select name="city">
    <option value="1" selected="selected">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>
<!--单选但显示多个,使用size-->
<select name="city" size="5">
    <option value="1" selected="selected">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>
<!--多选，按shift键，使用multiple-->
<select name="city" size="10" multiple="multiple">
    <option value="1" selected="selected">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>
<!--分组显示，使用optgroup-->
<select name="city">
    <optgroup label="山西省">
        <option value="1" selected="selected">平遥</option>
        <option value="2">太原</option>
    </optgroup>
    <optgroup label="河北省">
        <option value="1" selected="selected">石家庄</option>
        <option value="2">邯郸</option>
    </optgroup>
</select>
10、a标签--调整+锚（行内标签）
<!--调整-->
<a href="http://www.baidu.com" target="_blank">百度</a>  <!-- target="_blank" 在新标签页打开超链接-->
<!--锚，#+id 目录跳转，标签ID不能重复-->
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1">第一章内容</div>
<div id="i2">第二章内容</div>
<div id="i3">第三章内容</div>
11、img标签
<!--用a 标签包裹，点击图片可以跳转-->
<!--style设置图片大小,css样式-->
<!--alt属性，当图片不存在时显示-->
<!--title当鼠标放到图片上时显示-->
<a href="http://www.baidu.com">
    <img src="../image/11.jpg" style="height: 200px;width: 200px;" alt="汽车" title="保时捷">.
</a>
<!--注意：在IE浏览器中，加a标签后，图片会显示蓝色边框，是因为a默认有个border样式,可设置样式border 0;-->
img{border:0;}

12、列表标签--ul,ol,dl
<!--前面点号ul-->
<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
<!--数字排序ol-->
<ol>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ol>
<!--dl分层-->
<dl>
    <dt>ttt</dt>
    <dd>ddd</dd>
    <dd>ddd</dd>
</dl>

13、table标签--表格
<!--border 边框-->
<table border="1">
    <thead> <!--thead表头，tr是行，th是单元格-->
        <tr>
            <th>主机名</th>
            <th>IP</th>
            <th>端口</th>
        </tr>
    </thead>
    <tbody> <!--tbody表体，tr是行，td是单元格-->
        <tr>
            <!--<td>host1</td>-->
            <td colspan="3">1.1.1.1</td>    <!--colspan横向合并单元格，值为占单元格个数，要去掉本tr中的一个td-->
        </tr>
        <tr>
            <td>host1</td>
            <td><a href="#">1.1.1.1</a></td>
            <td rowspan="2">22</td>         <!--rowspan纵向合并单元格，值为占单元格数，要去掉相邻tr中的一个td-->
        </tr>
            <tr>
            <td>host2</td>
            <td><a href="#">1.1.1.1</a></td>
        </tr>
    </tbody>
</table>
14、label标签
<!--结合input标签使用-->
<label for="username">用户名：</label>  <!--for标签使的label标签与id=username标签相关联，点击label标签时可使关联的标签获取光标。-->
<input type="text" name="user" id="username">

15、fieldset标签
<fieldset>
    <legend>登录</legend>
    <label for="username1">用户名：</label>
    <input type="text" id="username1">
    <br>
    <br>
    <label for="passwd">密码：</label>
    <input type="password" id="passwd">
</fieldset>

16、border标签
border-radius 50%  圆边框，也可以写多少px。


</body>
</html>